<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="/assets/Masquerade.ico" type="image/x-icon">
  <title>tDocument</title>
  <script src="./assets/vue3.min.js"></script>
</head>

<body>
  <div id="app">
    <component is="cheader" :page="page" @submit-page="handlePageChange"></component>
    <div id="bodyd">
      <aside id="main_aside"></aside>
      <div id="main_content">
        <component is="download" v-if="page==0"></component>
        <component is="upload" v-if="page==1"></component>
        <component is="chat" v-if="page==2"></component>
        <component is="about" v-if="page==9"></component>

        <!-- <div style="display: flex; flex-direction: row">
                    <div style="display: flex; flex-direction: column">
                      <button @click="messageDisplay=true" style="width: 8rem">
                        弹出信息
                      </button>
                      <button @click="messageDisplay=false" style="width: 8rem">
                        关闭信息
                      </button>
                      {{messageDisplay}}
                    </div>

                    <div style="display: flex; flex-direction: column">
                      <button @click="messageBoxDisplay=true" style="width: 8rem">
                        弹出信息box
                      </button>
                      <button @click="messageBoxDisplay=false" style="width: 8rem">
                        关闭信息box
                      </button>
                      {{messageBoxDisplay}}
                    </div>
                  </div>
                </div>-->
      </div>

      <component is="cmessage" v-model:display="messageDisplay" @submit-status="handleMessageStatusChange"></component>
      <component is="cmessagebox" v-model:display="messageBoxDisplay" @submit-status="handleMessageBoxStatusChange">
      </component>
    </div>
  </div>
</body>

<script type="module">
  import { cmpt_header } from "./components/header.js";
  import { cmpt_message } from "./components/message.js";
  import { cmpt_messagebox } from "./components/messageBox.js";
  import { view_download } from "./views/download.js";
  import { view_upload } from "./views/upload.js";
  import { view_chat } from "./views/chat.js";
  import { view_about } from "./views/about.js";

  const { createApp } = Vue;
  createApp({
    data() {
      return {
        page: 1,
        messageDisplay: false,
        messageBoxDisplay: false,
      };
    },
    components: {
      cheader: cmpt_header,
      cmessage: cmpt_message,
      cmessagebox: cmpt_messagebox,
      download: view_download,
      upload: view_upload,
      chat: view_chat,
      about: view_about,
    },
    methods: {
      handlePageChange(value) {
        this.page = value;
      },
      handleMessageStatusChange(value) {
        this.messageDisplay = value;
      },
      handleMessageBoxStatusChange(value) {
        this.messageBoxDisplay = value;
      },
    },
  }).mount("#app");
</script>

<link rel="stylesheet" href="assets/style/framework.min.css" />
<link rel="stylesheet" href="assets/style/message.min.css" />
<link rel="stylesheet" href="assets/style/messagebox.min.css" />
<link rel="stylesheet" href="assets/style/upload.min.css" />
<link rel="stylesheet" href="assets/style/download.min.css" />
<link rel="stylesheet" href="assets/style/chat.min.css" />

</html>